<template>
  <div class="container">
    <div class="content">
      <div class="title">
        <div class="line"></div>
        <div class="title-text">实际使用外资完成进度</div>
      </div>
      <div class="main">
        <div class="main-text">2021年（1-4月份）</div>
        <el-progress :text-inside="true" :stroke-width="49" :percentage="value"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Utilize',
  props: {
    list: Array
  },
  data () {
    return {
      value: 0
    }
  },
  methods: {
    getInfo () {
      this.value = parseFloat(this.list[0].current_value)
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style  scoped>
.main >>> .el-progress-bar__inner {
  text-align: center;
  background: linear-gradient(189deg, #50acff 1%, #1983e8 100%);
}
.main >>> .el-progress-bar__outer {
  background: #e7e7e7;
}

.content {
  height: 260px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px -8px 39px 1px rgba(230, 230, 230, 0.5),
    0px 8px 39px 1px rgba(230, 230, 230, 0.5);
  border-radius: 20px;
}
.main {
  box-sizing: border-box;
  padding: 0 130px;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.main-text {
  text-align: center;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 28px;
}
.title {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 17px 0 10px 20px;
}

.title-text {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.line {
  width: 7px;
  height: 24px;
  background: #1492ff;
  border-radius: 4px;
  margin-right: 7px;
}
</style>
